<template>
  <el-dialog
    v-model="isShowDialog"
    :before-close="handleClose"
    title="上架指标"
    draggable
    width="500px"
  >
    <el-form
      ref="formRef"
      :model="saveParams"
      label-width="100px"
      :rules="rules"
    >
      <el-form-item label="收货数量" prop="receiptNum">
        <el-input v-model="saveParams.receiptNum" disabled />
      </el-form-item>
      <el-form-item label="质检数量" prop="qcPassNum">
        <el-input v-model="saveParams.qcPassNum" disabled />
      </el-form-item>
      <el-form-item label="待上架数量" prop="putawayNum">
        <el-input v-model="saveParams.putawayNum" disabled />
      </el-form-item>
      <el-form-item label="上架指标" prop="putawayPercent">
        <el-input
          v-model="saveParams.putawayPercent"
          placeholder="百分比"
          @input="
            saveParams.putawayPercent = limitNumber(saveParams.putawayPercent)
          "
          clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="clickSave"> 确定 </el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from "vue";
import { savePutawayPercent } from "@/api/scApi";

const { proxy } = getCurrentInstance();
const props = defineProps({
  isShowDialog: {
    type: Boolean,
    default: false,
  },
  dialogData: { type: Object },
  receiptId: { type: String },
});

const emits = defineEmits(["cancel", "save", "saveEnd"]);
function handleClose() {
  emits("cancel");
}
let saveParams = ref({
  qcPassNum: props.dialogData.qcPassNum,
  receiptNum: props.dialogData.receiptNum,
  putawayNum: props.dialogData.putawayNum,
});
const rules = ref({
  putawayPercent: [
    { required: true, message: "百分比不能为空", trigger: "blur" },
  ],
});

function clickSave() {
  proxy.$refs.formRef.validate((valid) => {
    if (valid) {
      emits("save");
    }
  });
}

function clickSavePutawayPercent() {
  savePutawayPercent({
    receiptId: props.receiptId,
    ...saveParams.value,
  }).then((res) => {
    if (res.code === 200) {
      proxy.$modal.msgSuccess("保存成功");
      emits("saveEnd");
    }
  });
}

defineExpose({
  clickSavePutawayPercent,
});
</script>

<style scoped lang="scss"></style>
